<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url:"getBookInfo",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象#}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        str+="<tr><td>"+row[0]+"</td><td>"+row[1]+"</td><td>"+row[2]+"</td><td>"+row[3]+"</td><td>"+row[4]+"</td>"+
                            "<td><a href='/DelBook?bname="+row[0]+"' class='layui-btn'><span class='layui-icon layui-icon-delete'></span>删除</a></td></tr>"
                        $("#tbody").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("没有权限", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        });
        {#添加    #}
        function UpdateBook() {
            $.ajax({
                url: "UpdateBook",
                method: "post",
                data: $("#update").serialize(),
                success: function (result) {
                    if (result == "1")
                        layer.msg("添加成功", {
                            time: 1000,
                            icon: 1
                        }, function () {
                            window.location.href = "/Bookmanage"
                        });
                    else
                        alert("添加失败")
                },
                error: function (e) {
                    alert("连接失败")
                }
            });
        }
        {#修改数量#}
        function UpBooknumber() {
            $.ajax({
                url: "UpBooknumber",
                method: "post",
                data: $("#f1").serialize(),
                success: function (result) {
                    if (result == "1")
                        layer.msg("修改成功", {
                            time: 1000,
                            icon: 1
                        }, function () {
                            window.location.href = "/Bookmanage"
                        });
                    else
                        alert("修改失败")
                },
                error: function (e) {
                    alert("连接失败")
                }
            });
        }
        {#修改数量#}
        function UpBookrich() {
            $.ajax({
                url: "UpBookrich",
                method: "post",
                data: $("#f2").serialize(),
                success: function (result) {
                    if (result == "1")
                        layer.msg("修改成功", {
                            time: 1000,
                            icon: 1
                        }, function () {
                            window.location.href = "/Bookmanage"
                        });
                    else
                        alert("修改失败")
                },
                error: function (e) {
                    alert("连接失败")
                }
            });
        }
        function selectBook() {
            $.ajax({
                url:'selectBook',
                method: "post",
                data:$("#f1").serialize(),
                success:function (result){
                    if(result=="0")
                        layer.msg("暂无", {
                            time: 3000,
                            icon: 2
                        });
                    else {
                        jsonObj=JSON.parse(result);
                        var str="";
                        $.each(jsonObj,function(index,row) {
                            str+="<tr><td>"+row[0]+"</td><td>"+row[1]+"</td><td>"+row[2]+"</td><td>"+row[3]+"</td><td>"+row[4]+"</td>"+
                                "<td><a href='/DelBook?bname="+row[0]+"' class='layui-btn'><span class='layui-icon layui-icon-delete'></span>删除</a></td></tr>"
                            $("#tbody").html(str);
                        });
                    }
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }

    </script>
</head>
<body>
<div class="layui-elem-quote">
    图书管理
</div>
<br>
<hr class="layui-border-orange">
<br>
<div>
    <form method="post" id="f1" name="f1" class="layui-form">
        <div class="layui-row">
            <div class="layui-col-md3" >
                <label class="layui-form-label">查询方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="sc" value="bname" title="书名" checked>
                    <input type="radio" name="sc" value="author" title="作者">
                </div>
            </div>
            <div class="layui-col-md5" >
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="请输入" class="layui-input" style="width: 80%">
                </div>
            </div>
            <div class="layui-col-md2" >
                <a href="javascript:selectBook()" class="layui-btn"><span class="layui-icon layui-icon-search"></span> 查询</a>
                <a href="javascript:f1.reset()" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-fonts-clear"></span> 重置</a>
            </div>
        </div>
    </form>
</div>
<br>
<hr class="layui-border-orange">
<br>
<div style="width: 100%;height: 300px;overflow-y:auto;">
<table class="layui-table" style="height: 100%">
    <tr>
        <th>书名</th>
        <th>作者</th>
        <th>类别</th>
        <th>数量</th>
        <th>价钱</th>
        <th>操作</th>
    </tr>
    <tbody id="tbody">
    </tbody>
</table>
</div>
<br>
<hr class="layui-border-orange">
<br>
<div class="layui-elem-quote">
    添加书籍
</div>
<br>
<hr class="layui-border-orange">
<br>
<form method="post" id="update" name="update" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="u_bname" name="u_bname" class="layui-input" placeholder="请输入书名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="u_author" name="u_author" class="layui-input" placeholder="请输入作者">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="u_class" name="u_class" class="layui-input" placeholder="请输入类型">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="u_number" name="u_number" class="layui-input" placeholder="请输数量">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价钱</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="u_rich" name="u_rich" class="layui-input" placeholder="请输价钱">
        </div>
    </div>
    <div class="layui-form-item" align="center">
        <a href="javascript:UpdateBook()" class="layui-btn"><span
                class="layui-icon layui-icon-edit"></span> 添加</a>
        <a href="javascript:update.reset()" class="layui-btn layui-btn-warm"><span
                class="layui-icon layui-icon-fonts-clear"></span> 重置</a>
    </div>
</form>
<br>
<hr class="layui-border-orange">
<br>
<div class="layui-elem-quote">
    修改数量
</div>
<br>
<hr class="layui-border-orange">
<br>
<form method="post" id="f1" name="f1" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="s_bname" name="s_bname" class="layui-input" placeholder="请输入书名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="up_number" name="up_number" class="layui-input" placeholder="请输数量">
        </div>
    </div>
    <div class="layui-form-item" align="center">
        <a href="javascript:UpBooknumber()" class="layui-btn"><span
                class="layui-icon layui-icon-edit"></span> 修改数量</a>
        <a href="javascript:f1.reset()" class="layui-btn layui-btn-warm"><span
                class="layui-icon layui-icon-fonts-clear"></span> 重置</a>
    </div>
</form>
<br>
<hr class="layui-border-orange">
<br>
<div class="layui-elem-quote">
    修改价钱
</div>
<br>
<hr class="layui-border-orange">
<br>
<form method="post" id="f2" name="f2" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="s_bname" name="s_bname" class="layui-input" placeholder="请输入书名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价钱</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input id="up_rich" name="up_rich" class="layui-input" placeholder="请输价钱">
        </div>
    </div>
    <div class="layui-form-item" align="center">
        <a href="javascript:UpBookrich()" class="layui-btn"><span
                class="layui-icon layui-icon-edit"></span> 修改价钱</a>
        <a href="javascript:f2.reset()" class="layui-btn layui-btn-warm"><span
                class="layui-icon layui-icon-fonts-clear"></span> 重置</a>
    </div>
</form>


<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>